<template>
  <div class="login-container">
    <div class="login-content">
      <div class="login-logo">
        <img src="../../assets/images/login-logo.png" alt="">
        <div class="login-logo-text">
          <p style="font-size:34px;">广州局集团公司</p>
          <p style="font-size:60px;margin-top:10px;">智能牵引供电系统ITPS</p>
        </div>
      </div>
      <div class="login-form">
        <el-form ref="form" inline :model="form" :rules="rules" @keyup.enter.native="login">
          <el-form-item prop="username">
            <img class="form-item__icon" src="../../assets/images/login-account-gz.png" alt="">
            <el-input v-model="form.username" />
          </el-form-item>
          <el-form-item prop="password">
            <img class="form-item__icon" src="../../assets/images/login-password-gz.png" alt="">
            <el-input v-model="form.password" type="password" />
          </el-form-item>
          <el-button :loading="loading" @click="login">登录</el-button>
        </el-form>
        <div class="login-error-msg">
          <transition name="el-zoom-in-center">
            <el-alert v-if="errorMsg" type="error" :title="errorMsg" @close="errorMsg = ''" />
          </transition>
        </div>
      </div>
    </div>
    <div class="login-footer">
      <span>
        版权所有：中国铁路广州局集团有限公司供电部&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        技术支持：铁科院&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;成都唐源电气股份有限公司
      </span>
    </div>
  </div>
</template>

<script>
import { getToken as login } from '@/api/main'
import { setToken } from '@/utils/auth'
import store from '@/store'
import CryptoJS from 'crypto-js'
export default {
  name: 'LoginGZ',
  data() {
    return {
      zoom: document.body.clientWidth / 1920,
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: { required: true, message: '请输入账号', trigger: 'blur' },
        password: { required: true, message: '请输入密码', trigger: 'blur' }
      },
      errorMsg: '',
      loading: false,
      redirect: ''
    }
  },
  watch: {
    form: {
      handler() {
        this.errorMsg = ''
      },
      deep: true
    }
  },
  created() {
    this.redirect = this.$route.query && this.$route.query.redirect
  },
  beforeDestroy() {
    this.loading = false
  },
  methods: {
    login() {
      const form = new FormData()
      form.append('username', this.encrypt(this.form.username))
      form.append('password', this.encrypt(this.form.password))
      form.append('grant_type', 'password')
      form.append('client_id', this.encrypt('EIS'))
      form.append('client_secret', this.encrypt('cdtye2019'))
      this.$refs.form.validate(valid => {
        if (valid) {
          this.errorMsg = ''
          this.loading = true
          login(form).then(response => {
            const data = response
            if (data.access_token) {
              setToken(data.access_token)
              store.dispatch('app/setUserInfo', data.user_name)
              this.$router.replace({ path: this.redirect || '/' })
            } else {
              this.errorMsg = data.message
              this.loading = false
            }
          }).catch(error => {
            const errorRes = error.response
            this.errorMsg = errorRes.data.message || '服务器错误'
            this.loading = false
          })
        }
      })
    },
    encrypt(value) {
      // 如果是32位在java后端解密会报错 AES获取Cipher异常：Illegal key size 16位就不会
      // const key = CryptoJS.enc.Utf8.parse('61DC779D88F539478E45C55452AF9DBB')
      const key = CryptoJS.enc.Utf8.parse('61DC779D88F53947')
      const iv = CryptoJS.enc.Utf8.parse('1b76d0c6af4bcb56')
      const encrypted = CryptoJS.AES.encrypt(value, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
      }).toString()
      return encrypted
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container{
  height: 100%;
  position: relative;
  background: url(../../assets/images/login-gz-bg.png) 100% 100%;
  .login-content{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -65%);
    .login-logo{
      display: flex;
      color: #fff;
      align-items: center;
      img{
        margin-right: 20px;
      }
      p{
        white-space: nowrap;
      }
    }
    .login-form{
      margin-top: 50px;
      .el-form-item{
        margin-right: 20px !important;
      }
      /deep/.el-form-item__content{
        width: 280px;
        .el-input__inner{
          border-radius: 0;
          border-color: #4f73d2;
          background-color: #000;
          color: #fff;
          padding-left: 38px;
        }
        .form-item__icon{
          position: absolute;
          left: 11px;
          top: 50%;
          transform: translateY(-50%);
          z-index: 1;
        }
      }
      .el-button{
        width: 120px;
        color: #fff;
        background: #1d964d;
        border: 0;
        border-radius: 0;
      }
    }
  }
  .login-footer{
    position: fixed;
    bottom: 20px;
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #55a1f7;
    opacity: 0.7;
  }
  .login-error-msg{
    height: 35px;
    width: 580px;
    .el-alert--error{
      background-color: rgba(48, 129, 132, 0.5);
      .el-alert__closebtn{
        font-size: 18px;
        top: 8px;
        &:hover{
          color: rgba(48, 129, 132, 1);
        }
      }
    }
  }
}
</style>
